<template>
  <div style="position: relative">
    <i v-if="type == 2"
       style="font-size: 1.2rem;position: absolute; "
       @click="animateChaneg"
       :style="{'fontSize': fontSize,width:fontSize ,height:fontSize}"
       class="icon njfont nj-jiagouwuche cjy-center cjy-animateDeleay"
       :class="{'addAnimaite': isaddAnimaite}"></i>
    <i v-if="type == 1"
       style="font-size: 1.2rem;position: absolute; "
       @click="addButton"
       :style="{'fontSize': fontSize,width:fontSize ,height:fontSize}"
       class="icon njfont nj-jiagouwuche cjy-center cjy-animateDeleay"
       :class="{'addAnimaite': isaddAnimaite}"></i>
  </div>
</template>

<script>
  // import Hello from './components/Hello'

  export default {
    data() {
      return {
        isaddAnimaite: false,
      }
    },
    components: {},
    props: {
      type: {
        default: 0
      },
      fontSize: {
        default: '1.2rem'
      },
      add: {
        type: Function,
        default: () => {
          return () => {
          }
        }
      }
    },
    methods: {
      addButton() {
        this.add()
      },
      animateChaneg() {
        setTimeout(() => {
          this.isaddAnimaite = true
          setTimeout(() => {
            this.isaddAnimaite = false
          }, 200)
        }, 200)
      },
    }

  }
</script>

<style scoped>


  .cjy-center {
    position: absolute;
    margin: 0;
    left: 0;
    right: 0;
    top: 5px;
    bottom: 0
  }

  .cjy-animateDeleay {
    transition: 0.2s;
  }

  .addAnimaite {

    transform: scale(1.2, 1.2);
  }
</style>
